<template>
	<div class="info">
		<div class="popup">
			<h2>房主信息确认</h2>
			<div class="data">
				<div class="item" v-for="(value, key) in dataEnum" :key="key">
					<p>{{ value }}：</p>
					<p class="font-weight">{{ houseData?.[key] ?? '-' }}</p>
				</div>
			</div>

			<div class="btn">
				<van-button
					block
					type="primary"
					@click="toMenu"
				>
					确定
				</van-button>
			</div>

			<van-image
				:src="require('./image/icon_close.png')"
				@click="onClose"
			/>
		</div>
	</div>
</template>

<script setup>
import { nextTick, onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { bindConfirm, houseInfo, addhouse } from '@/service/api'
import { useBuildingStore } from '@/store'

const buildingStore = useBuildingStore()
const router = useRouter()
const route = useRoute()

const houseData = ref({})
const dataEnum = ref({
	'fwbh': '房屋编号',
	'hzxm': '户主姓名',
	'address': '房屋地址',
	'region': '行政区划',
})

const toMenu = async () => {
	if (route?.query?.from === 'menu') {
		addMore()
		return
	}
	try {
		const result = await bindConfirm({
			id: route.query.id
		})
		if (result?.succ) {
			await buildingStore.setBuildingInfo(route.query.fwbh)
			nextTick(() => {
				router.push({
					name: 'menu',
					query: {
						id: route.query.id
					}
				})
			})
		}
	} catch (e) {
	}
}

const addMore = async () => {
	const result = await addhouse({
		id: route.query.id,
		fwbh: route.query.fwbh,
	})
	if (result?.succ) {
		await buildingStore.setBuildingInfo(route.query.fwbh)
		nextTick(() => {
			router.go(-2)
			// router.push({
			// 	name: 'menu',
			// 	query: {
			// 		id: route.query.id
			// 	}
			// })
		})
	}
}

const onClose = () => {
	router.back()
}

const getData = async () => {
	const result = await houseInfo({
		fwbh: route.query.fwbh
	})
	houseData.value = {
		...result.data,
		region: `${result.data?.xzqdmAlias}-${result.data?.townAlias}-${result?.data?.villageAlias}`
	}
}

onMounted(() => {
	getData()
})
</script>

<style scoped lang="less">
.info {
	position: relative;
	height: 100%;
	background: url(image/page_bg.png) no-repeat top center / 100% 100%;
	.popup {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -60%);
		width: 630px;
		height: 874px;
		background: #fff;
		border-radius: 16px;
		h2 {
			margin-top: 56px;
			text-align: center;
			font-size: 36px;
		}
		.data {
			display: flex;
			flex-direction: column;
			gap: 20px;
			margin: 32px 56px 64px;
			p {
				min-height: 40px;
				line-height: 40px;
				&:nth-of-type(1) {
					color: #1A2735;
					margin-bottom: 8px;
				}
				&:nth-of-type(2) {
					background: #EFF3F6;
					padding: 12px 24px;
				}
			}
		}
		.btn {
			margin: 0 56px;
		}
		.van-image {
			position: absolute;
			width: 72px;
			bottom: -120px;
			left: 50%;
			transform: translateX(-50%);
		}
	}
}
</style>
